<template>
    <div class="tabbar">
        <div class="tabbar-item" v-for="(item, index) in list" :key="index" @click="handleClick(index)">
            <div class="icon">
                <img :src="curTab == index ? item.activeIcon : item.icon" alt="">
            </div>
            <div :class="['titlle', { isActive: curTab == index }]">
                {{ item.name }}
            </div>
        </div>
    </div>
</template>

<script setup>
import { computed } from 'vue'
const props = defineProps({
    modelValue: {
        type: Number,
        required: true,
        default: 0
    },
    color: {
        type: String,
        default: 'color'
    },
    list: {
        type: Array,
        default: () => []
    },
})
const emit = defineEmits(['onClick', 'update:modelValue'])
const curTab = computed({
    get() {
        return props.modelValue
    },
    set(value) {
        emit('update:modelValue', value)
    }
})
function handleClick(index) {
    emit('update:modelValue', index)
    emit('onClick', index)
}
</script>

<style lang="less" scoped>
.tabbar {
    display: flex;
    background-color: #fff;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    border-top: 1px solid #eee;
    // box-shadow: 0 -2px 1px rgba(100, 100, 100, 0.1);
    padding: 5px 0px 5px;
    z-index: 99;

    .tabbar-item {
        flex: 1;
        text-align: center;
        height: 49px;
        color: #999;
        font-size: 14px;
        transition: all .3s;

        .icon {
            img {
                width: 24px;
                height: 24px;
            }
        }

        .isActive {
            color: v-bind('color');
        }
    }
}
</style>